﻿var baseUrl = "http://www.starsea-house.com/star_house/";

function padDate(va) {
    va = va < 10 ? '0' + va : va;
    return va
}

//在线留言
Vue.component("msg-content", {
    data: function () {
        return {
            apiMessageUrl: "api/sys/msg/send",
            msg: {
                name: "",
                phone: "",
                remarks: ""
            },
            apiBottomUrl: "api/sys/bottom/info",
            bottomInfo: {},
            floatWinVo: {}
        }
    },
    template: '<div>\n' +
        '        <div class="container-fluid col-xl-12 footerMessage d-xl-flex d-lg-flex d-md-flex d-sm-none d-none">\n' +
        '          <div class="container">\n' +
        '            <div class="col-xl-12 justify-content-between d-flex">\n' +
        '                <div class="list-group d-inline-block col-lg-2">\n' +
        '                    <a href="index.html" class="list-group-item p-2 text-white bg-transparent border-0 mt-5 mb-3">\n' +
        '                        <h3>首页</h3>\n' +
        '                    </a>\n' +
        '                    <a href="about.html"\n' +
        '                       class="list-group-item list-group-item-action p-2 bg-transparent text-white border-0">关于星海</a>\n' +
        '                    <a href="information.html?type=2"\n' +
        '                       class="list-group-item list-group-item-action p-2 bg-transparent text-white border-0">资讯百科</a>\n' +
        '                    <a href="information.html?type=3"\n' +
        '                       class="list-group-item list-group-item-action p-2 bg-transparent text-white border-0">新闻动态</a>\n' +
        '                    <a href="contact.html"\n' +
        '                       class="list-group-item list-group-item-action p-2 bg-transparent text-white border-0">联系我们</a>\n' +
        '                </div>\n' +
        '                <div class="list-group d-inline-block col-lg-2">\n' +
        '                    <a href="globalHouse.html"\n' +
        '                       class="list-group-item p-2 bg-transparent text-white border-0 mt-5 mb-3">\n' +
        '                        <h3>精品房源</h3>\n' +
        '                    </a>\n' +
        '                    <a :href="\'globalHouse.html?areaCondition=\'+item.dictValue"\n' +
        '                       class="list-group-item list-group-item-action p-2 bg-transparent text-white border-0"\n' +
        '                       v-for="item in bottomInfo.areaConditions">{{item.dictLabelOrig}}</a>\n' +
        '                </div>\n' +
        '                <div class="list-group d-inline-block col-lg-2">\n' +
        '                    <a href="information.html?type=5"\n' +
        '                       class="list-group-item p-2 bg-transparent text-white border-0 mt-5 mb-3">\n' +
        '                        <h3>经纪团队</h3>\n' +
        '                    </a>\n' +
        '                    <a :href="\'article.html?id=\'+item.id" v-for="item in bottomInfo.brokets"\n' +
        '                       class="list-group-item list-group-item-action p-2 bg-transparent text-white border-0">{{item.title}}</a>\n' +
        '                </div>\n' +
        '                <div class="list-group d-inline-block col-lg-5">\n' +
        '                    <a class="list-group-item bg-transparent text-white list-group-item-action border-0 mt-5">联系地址：\n' +
        '                        {{floatWinVo.addr}}\n' +
        '                    </a>\n' +
        '                    <a class="list-group-item list-group-item-action bg-transparent text-white border-0">电子邮箱：\n' +
        '                        {{floatWinVo.email}}</a>\n' +
        '                    <a class="list-group-item list-group-item-action bg-transparent text-white border-0">微信号码：\n' +
        '                        {{floatWinVo.wxNo}}</a>\n' +
        '                    <a class="list-group-item list-group-item-action bg-transparent text-white border-0">联系电话： \n' +
        '                        {{floatWinVo.phone}}</a>\n' +
        '                    <a class="list-group-item list-group-item-action bg-transparent text-white border-0">服务时间：\n' +
        '                        9:00-17:00</a>\n' +
        '                    <a class="list-group-item list-group-item-action bg-transparent text-white border-0 align-text-bottom">\n' +
        '                        关注微信：\n' +
        '                        <img :src="floatWinVo.wxCode" class="img-fluid position-absolute onlineImg" alt="">\n' +
        '                    </a>\n' +
        '                </div>\n' +
        '            </div>\n' +
        '        </div>\n' +
        '      </div>\n' +
        '\n' +
        '        <!--底部信息-移动站-->\n' +
        '        <div class="container-fluid footerMessage d-flex d-sm-flex d-md-none d-lg-none d-xl-none flex-column justify-content-around mobile-footerHei">\n' +
        '            <div class="mobile-footer-div clearfix py-3 px-2">\n' +
        '                <h3>\n' +
        '                    <a href="index.html" class="noDecoration text-white">首页<span\n' +
        '                            class="mobile-footer-span pl-4">&gt;</span></a>\n' +
        '                </h3>\n' +
        '                <a href="about.html" class="noDecoration text-white">关于星海</a>\n' +
        '                <a href="information.html?type=2" class="noDecoration text-white">资讯百科</a>\n' +
        '                <a href="information.html?type=3" class="noDecoration text-white">新闻动态</a>\n' +
        '                <a href="contact.html" class="noDecoration text-white">联系我们</a>\n' +
        '            </div>\n' +
        '            <div class="mobile-footer-div clearfix py-3 px-2">\n' +
        '                <h3>\n' +
        '                    <a href="globalHouse.html" class="noDecoration text-white">精品房源<span\n' +
        '                            class="mobile-footer-span pl-4">&gt;</span></a>\n' +
        '                </h3>\n' +
        '                <a :href="\'globalHouse.html?areaCondition=\'+item.dictValue" class="noDecoration text-white"\n' +
        '                   v-for="item in bottomInfo.areaConditions">{{item.dictLabelOrig}}</a>\n' +
        '            </div>\n' +
        '            <div class="mobile-footer-div clearfix py-3 px-2">\n' +
        '                <h3>\n' +
        '                    <a href="information.html?type=5" class="noDecoration text-white"> 经纪团队<span\n' +
        '                            class="mobile-footer-span pl-4">&gt;</span></a>\n' +
        '                </h3>\n' +
        '                <a :href="\'article.html?id=\'+item.id" v-for="item in bottomInfo.brokets"\n' +
        '                   class="oDecoration text-white">{{item.title}}</a>\n' +
        '            </div>\n' +
        '            <div class="mobile-footer-div clearfix py-3 px-2 position-relative">\n' +
        '                <ul class="p-0 float-left ">\n' +
        '                    <li class="addressHei"><a href="#" class="noDecoration text-white">联系地址：</a></li>\n' +
        '                    <li><a class="noDecoration text-white">电子邮箱：</a></li>\n' +
        '                    <li><a class="noDecoration text-white">微信号码：</a></li>\n' +
        '                    <li><a class="noDecoration text-white">联系电话：</a></li>\n' +
        '                    <li><a class="noDecoration text-white">服务时间： </a></li>\n' +
        '                    <li><a class="noDecoration text-white">关注微信：</a></li>\n' +
        '                </ul>\n' +
        '                <ul class="p-0 float-left w-75 pl-3">\n' +
        '                    <li class="addressHei"><a href="#" class="noDecoration text-white" v-html="floatWinVo.minAddr"></a></li>\n' +
        '                    <li><a href="#" class="noDecoration text-white">{{floatWinVo.email}}</a></li>\n' +
        '                    <li><a href="#" class="noDecoration text-white">{{floatWinVo.wxNo}}</a></li>\n' +
        '                    <li><a href="#" class="noDecoration text-white">{{floatWinVo.phone}}</a></li>\n' +
        '                    <li><a href="#" class="noDecoration text-white">9:00-17:00</a></li>\n' +
        '                    <li><a href="#" class="noDecoration text-white">\n' +
        '                        <img :src="floatWinVo.wxCode" class="position-absolute float-left mobile-footer-wechat">\n' +
        '                    </a>\n' +
        '                    </li>\n' +
        '                </ul>\n' +
        '            </div>\n' +
        '        </div>\n' +
        '<!--版权所有-->\n' +
        '<div class="container-fluid p-0 d-flex justify-content-center bg-copyright">\n' +
        '    <div class="col-lg-8">\n' +
        '        <p class="mb-0 text-white text-center">&copy; 2018 STARSEA ALL Rights Reserved</p>\n' +
        '        <p class="mb-0 text-white text-center"><a href="http://beian.miit.gov.cn" target="_blank" style="color: white;">沪ICP备18017280号</a></p>\n' +
        '    </div>\n' +
        '</div>\n' +
        '        <div id="online" class="text-white p-1 d-none d-sm-none d-md-block position-absolute">\n' +
        '            <p class="mb-0 text-center clearfix">\n' +
        '                <i class="zi zi_phone iMiddleSize float-left" style="font-size: 16px"></i>\n' +
        '                <span class="mx-auto">{{floatWinVo.phone}}</span>\n' +
        '            </p>\n' +
        '            <p class="mb-0 text-center clearfix">\n' +
        '                <i class="zi zi_envelope align-middle iMiddleSize float-left"></i>\n' +
        '                <span class="mx-auto">{{floatWinVo.email}}</span>\n' +
        '            </p>\n' +
        '            <img :src="floatWinVo.wxCode" class="img-fluid mb-2 d-block mx-auto" alt="">\n' +
        '            <p class="mb-0 text-center clearfix">\n' +
        '                <i class="zi zi_tmWeixin align-middle iMiddleSize float-left"></i>\n' +
        '                <span class="mx-auto">微信号 {{floatWinVo.wxNo}}</span>\n' +
        '            </p>\n' +
        '            <button class="btn btn-light text-primary onlineMessage d-block mx-2 w-75 mx-auto" type="button"\n' +
        '                    v-on:click="clearOldMsg">在线留言\n' +
        '            </button>\n' +
        '        </div>\n' +
        '        <!--咨询弹窗-->\n' +
        '        <div class="mask2 position-fixed"></div>\n' +
        '        <form class="position-absolute mask2-form">\n' +
        '            <div class="form-group px-2 py-1 position-relative">\n' +
        '                <label for="name2">姓名：</label>\n' +
        '                <input type="text" class="form-control pc-input" id="name2" v-model="msg.name" maxlength="10">\n' +
        '               <i class="zi zi_check position-absolute d-none text-success"></i>\n' +
        '                <i class="zi zi_times position-absolute d-none text-danger"></i>\n' +
        '            </div>\n' +
        '            <div class="form-group px-2 py-1 position-relative">\n' +
        '                <label for="wechat2">您的手机号/微信：</label>\n' +
        '                <input type="text" class="form-control pc-input" id="wechat2" v-model="msg.phone" maxlength="20">\n' +
        '               <i class="zi zi_check position-absolute d-none text-success"></i>\n' +
        '                <i class="zi zi_times position-absolute d-none text-danger"></i>\n' +
        '            </div>\n' +
        '            <div class="form-group px-2 py-1 position-relative">\n' +
        '                <label for="content2">咨询内容：</label>\n' +
        '                <textarea class="form-control pc-input" id="content2" rows="8" v-model="msg.remarks" maxlength="200"></textarea>\n' +
        '               <i class="zi zi_check position-absolute d-none text-success"></i>\n' +
        '                <i class="zi zi_times position-absolute d-none text-danger"></i>\n' +
        '            </div>\n' +
        '            <button class="btn btn-primary d-block w-100" v-on:click="sendMsg" type="button">预约咨询</button>\n' +
        '            <button class="mask2-form-close position-absolute btn" type="button">X</button>\n' +
        '        </form>\n' +
        '        <div class="position-fixed px-0 mask2-right text-center">\n' +
        '            <span class="mx-auto text-center"><i class="zi zi_check"></i></span>\n' +
        '            <p class="px-3">已经收到了您的留言</p>\n' +
        '            <p class="px-3">我们会在第一时间内给予您回复!</p>\n' +
        '            <button class="btn btn-primary text-white w-100">确定</button>\n' +
        '        </div>\n' +
        '        <!--移动端--咨询弹窗-->\n' +
        '        <span class="position-absolute mobile-about-i d-xl-none d-lg-none d-md-none d-sm-block d-block"\n' +
        '              v-on:click="clearOldMsg"><i\n' +
        '                class="zi zi_pencilalt iBigSize"></i></span>\n' +
        '        <div class="mask2 position-fixed mobile-mask2"></div>\n' +
        '        <form class="position-absolute mask2-form mobile-mask2-window">\n' +
        '            <div class="form-group p-3 position-relative">\n' +
        '                <label for="name2">姓名：</label>\n' +
        '                <input type="text" class="form-control mb-input" id="name3" v-model="msg.name" maxlength="10">\n' +
        '               <i class="zi zi_check position-absolute d-none text-success mbI"></i>\n' +
        '               <i class="zi zi_times position-absolute d-none text-danger mbI"></i>\n' +
        '            </div>\n' +
        '            <div class="form-group p-3 position-relative">\n' +
        '                <label for="wechat2">您的手机号/微信：</label>\n' +
        '                <input type="text" class="form-control mb-input" id="wechat4" v-model="msg.phone" maxlength="20">\n' +
        '               <i class="zi zi_check position-absolute d-none text-success mbI"></i>\n' +
        '               <i class="zi zi_times position-absolute d-none text-danger mbI"></i>\n' +
        '            </div>\n' +
        '            <div class="form-group p-3 position-relative">\n' +
        '                <label for="content2">咨询内容：</label>\n' +
        '                <textarea class="form-control mb-input" id="content5" rows="5" v-model="msg.remarks" maxlength="200"></textarea>\n' +
        '               <i class="zi zi_check position-absolute d-none text-success mbI"></i>\n' +
        '               <i class="zi zi_times position-absolute d-none text-danger mbI"></i>\n' +
        '            </div>\n' +
        '            <button class="btn btn-primary d-block w-100" v-on:click="sendMsg" type="button">预约咨询</button>\n' +
        '            <button class="mask2-form-close position-absolute btn" type="button">X</button>\n' +
        '        </form>\n' +
        '        <div class="position-fixed px-0 mask2-right text-center mobile-mask2-right">\n' +
        '            <span class="mx-auto text-center"><i class="zi zi_check"></i></span>\n' +
        '            <p class="px-3">已经收到了您的留言</p>\n' +
        '            <p class="px-3">我们会在第一时间内给予您回复!</p>\n' +
        '            <button class="btn btn-primary text-white w-100" type="button">确定</button>\n' +
        '        </div>\n' +
        '    </div>',
    mounted: function () {
        this.getBottomInfo();
    },
    updated: function () {//数据加载完触 发
        // ie兼容
        (function () {
            // ie?
            if (!$.support.noCloneChecked && !$.support.boxSizingReliable()) {
                // 移除弹性布局样式
                $(".about>div").removeClass("justify-content-xl-between justify-content-lg-between justify-content-md-between")
                    .children("img").removeClass("col-xl-4 col-lg-5 col-md-6").addClass("col-xl-5 col-lg-5 col-md-7");

                // ie兼容
                $(".card-deck").parent().addClass("ie");
            }
        })(window);
    },
    methods: {
        sendMsg: function () {
            for (key in this.msg) {
                if (!this.msg[key]) {
                    return;
                }
            }

            this.$http.post(baseUrl + this.apiMessageUrl, this.msg).then(function (res) {
                console.log(res)
            }).catch(function (response) {
                console.log(response)
            })
        },
        clearOldMsg: function () {
            this.msg = {
                name: "",
                phone: "",
                remarks: ""
            }
        },
        getBottomInfo: function () {
            this.$http.get(baseUrl + this.apiBottomUrl).then(function (res) {
                this.bottomInfo = res.data.data.bottomVo;
                this.floatWinVo = res.data.data.floatWin;
                let floatInfo = this.floatWinVo;
                $(function () {
                    const _cord = $("#cord");
                    const _phone = $("#phone");
                    const _email = $("#email");
                    const _cord1 = $("#cord1");
                    const _phone1 = $("#phone1");
                    const _email1 = $("#email1");
                    if (_cord && _phone && _email) {
                        _cord.attr("src", floatInfo.wxCode);
                        _phone.html(floatInfo.phone);
                        _email.html(floatInfo.email);
                        _cord1.attr("src", floatInfo.wxCode);
                        _phone1.html(floatInfo.phone);
                        _email1.html(floatInfo.email);
                    }
                })
            }).catch(function (response) {
                console.log(response)
            })
        }
    }
})

//在线咨询对象
var message = new Vue({
    el: '#message'
})

//悬停
function menu_hover() {
    $(".tagger-menu").on("mouseover mouseout", function (event) {
        if (event.type == "mouseover") {
            $(this).find("ul").show();
        } else if (event.type == "mouseout") {
            $(this).find("ul").hide();
        }
    })
}
